M

MLOG

తెలుగు

నిజంగా రెస్పాన్సివ్ వెబ్ డిజైన్ కోసం CSS కంటైనర్ క్వెరీలలో నైపుణ్యం సాధించండి. అన్ని పరికరాల్లో అతుకులు లేని వినియోగదారు అనుభవం కోసం, కేవలం వ్యూపోర్ట్ కాకుండా కంటైనర్ పరిమాణం ఆధారంగా లేఅవుట్‌లను ఎలా మార్చాలో తెలుసుకోండి.

రెస్పాన్సివ్ డిజైన్‌ను ఆవిష్కరించడం: CSS కంటైనర్ క్వెరీల కోసం ఒక సమగ్ర గైడ్

సంవత్సరాలుగా, రెస్పాన్సివ్ వెబ్ డిజైన్ ప్రధానంగా మీడియా క్వెరీలపై ఆధారపడి ఉంది, వెబ్‌సైట్‌లు వ్యూపోర్ట్ యొక్క వెడల్పు మరియు ఎత్తు ఆధారంగా వాటి లేఅవుట్ మరియు స్టైలింగ్‌ను మార్చడానికి అనుమతిస్తుంది. ఇది ప్రభావవంతంగా ఉన్నప్పటికీ, ఈ విధానం కొన్నిసార్లు పరిమితంగా అనిపించవచ్చు, ప్రత్యేకించి మొత్తం స్క్రీన్ పరిమాణంతో సంబంధం లేకుండా స్వతంత్రంగా మార్పు చెందాల్సిన సంక్లిష్ట భాగాలతో వ్యవహరించేటప్పుడు. CSS కంటైనర్ క్వెరీలను పరిచయం చేస్తున్నాము – ఇది ఒక శక్తివంతమైన కొత్త సాధనం, ఇది ఎలిమెంట్‌లు వ్యూపోర్ట్‌కు బదులుగా వాటి కంటైనింగ్ ఎలిమెంట్ యొక్క పరిమాణానికి ప్రతిస్పందించడానికి అనుమతిస్తుంది. ఇది రెస్పాన్సివ్ డిజైన్‌లో కొత్త స్థాయి సౌలభ్యాన్ని మరియు కచ్చితత్వాన్ని ఆవిష్కరిస్తుంది.

CSS కంటైనర్ క్వెరీలు అంటే ఏమిటి?

CSS కంటైనర్ క్వెరీలు అనేవి ఒక CSS ఫీచర్, ఇది ఒక ఎలిమెంట్‌కు దాని పేరెంట్ కంటైనర్ యొక్క పరిమాణం లేదా ఇతర లక్షణాల ఆధారంగా స్టైల్స్‌ను వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తుంది. వ్యూపోర్ట్‌ను లక్ష్యంగా చేసుకునే మీడియా క్వెరీలలా కాకుండా, కంటైనర్ క్వెరీలు ఒక నిర్దిష్ట ఎలిమెంట్‌ను లక్ష్యంగా చేసుకుంటాయి. స్క్రీన్ పరిమాణంతో సంబంధం లేకుండా, ఒక కాంపోనెంట్ దాని కంటైనర్‌లో అందుబాటులో ఉన్న స్థలం ఆధారంగా దాని స్టైలింగ్‌ను మార్చుకునేలా ఇది సాధ్యం చేస్తుంది.

ఒక కార్డ్ కాంపోనెంట్‌ను ఊహించుకోండి, అది ఒక ఇరుకైన సైడ్‌బార్‌లో లేదా వెడల్పైన ప్రధాన కంటెంట్ ఏరియాలో ఉంచినప్పుడు విభిన్నంగా ప్రదర్శించబడుతుంది. మీడియా క్వెరీలతో, మీరు స్క్రీన్ పరిమాణం ఆధారంగా కార్డ్ యొక్క స్టైలింగ్‌ను సర్దుబాటు చేయాల్సి రావచ్చు, ఇది అస్థిరతలకు దారితీయవచ్చు. కంటైనర్ క్వెరీలతో, మీరు కార్డ్ యొక్క కంటైనర్ ఒక నిర్దిష్ట వెడల్పుకు చేరుకున్నప్పుడు ప్రత్యేకంగా వర్తించే స్టైల్స్‌ను నిర్వచించవచ్చు, ఇది వివిధ లేఅవుట్లలో స్థిరమైన మరియు రెస్పాన్సివ్ అనుభవాన్ని నిర్ధారిస్తుంది.

కంటైనర్ క్వెరీలను ఎందుకు ఉపయోగించాలి?

సాంప్రదాయ మీడియా క్వెరీల కంటే కంటైనర్ క్వెరీలు అనేక ప్రయోజనాలను అందిస్తాయి:

CSS కంటైనర్ క్వెరీలను ఎలా అమలు చేయాలి

CSS కంటైనర్ క్వెరీలను అమలు చేయడంలో రెండు కీలక దశలు ఉంటాయి: కంటైనర్‌ను నిర్వచించడం మరియు క్వెరీలను రాయడం.

1. కంటైనర్‌ను నిర్వచించడం

మొదట, మీరు ఒక ఎలిమెంట్‌ను *కంటైనర్‌*గా నియమించాలి. ఇది container-type ప్రాపర్టీని ఉపయోగించి చేయబడుతుంది. container-type కోసం రెండు ప్రధాన విలువలు ఉన్నాయి:

మీరు మీ కంటైనర్‌కు పేరు పెట్టడానికి container-name కూడా ఉపయోగించవచ్చు, ఇది మీ క్వెరీలలో నిర్దిష్ట కంటైనర్‌లను లక్ష్యంగా చేసుకోవడానికి సహాయపడుతుంది. ఉదాహరణకు:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

ఈ కోడ్ .card-container క్లాస్‌తో ఉన్న ఎలిమెంట్‌ను కంటైనర్‌గా ప్రకటిస్తుంది. కంటైనర్ యొక్క వెడల్పు ఆధారంగా క్వెరీలను అనుమతించడానికి మేము inline-size ను పేర్కొంటున్నాము. మేము దానికి cardContainer అనే పేరు కూడా ఇచ్చాము.

2. కంటైనర్ క్వెరీలను రాయడం

మీరు కంటైనర్‌ను నిర్వచించిన తర్వాత, మీరు @container ఎట్-రూల్‌ని ఉపయోగించి కంటైనర్ క్వెరీలను రాయవచ్చు. సింటాక్స్ మీడియా క్వెరీల మాదిరిగానే ఉంటుంది:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

cardContainer అని పేరు పెట్టబడిన కంటైనర్ కనీస వెడల్పు 400px ఉన్నప్పుడు మాత్రమే ఈ క్వెరీ కర్లీ బ్రేస్‌లలోని స్టైల్స్‌ను వర్తింపజేస్తుంది. ఇది .card ఎలిమెంట్‌ను (బహుశా .card-container యొక్క చైల్డ్) లక్ష్యంగా చేసుకుని దాని లేఅవుట్‌ను సర్దుబాటు చేస్తుంది. కంటైనర్ 400px కంటే ఇరుకైనదిగా ఉంటే, ఈ స్టైల్స్ వర్తించవు.

షార్ట్‌హ్యాండ్: మీరు కంటైనర్ పేరును పేర్కొనవలసిన అవసరం లేనప్పుడు `@container` రూల్ యొక్క షార్ట్‌హ్యాండ్ వెర్షన్‌ను కూడా ఉపయోగించవచ్చు:

@container (min-width: 400px) {
  /* Styles to apply when the container is at least 400px wide */
}

కంటైనర్ క్వెరీల ఆచరణాత్మక ఉదాహరణలు

మరింత రెస్పాన్సివ్ మరియు అనుకూల లేఅవుట్‌లను సృష్టించడానికి మీరు కంటైనర్ క్వెరీలను ఎలా ఉపయోగించవచ్చో కొన్ని ఆచరణాత్మక ఉదాహరణలను చూద్దాం.

ఉదాహరణ 1: కార్డ్ కాంపోనెంట్

ఈ ఉదాహరణ దాని కంటైనర్ వెడల్పు ఆధారంగా కార్డ్ కాంపోనెంట్‌ను ఎలా మార్చాలో చూపిస్తుంది. కంటైనర్ ఇరుకైనప్పుడు కార్డ్ దాని కంటెంట్‌ను ఒకే కాలమ్‌లో మరియు కంటైనర్ వెడల్పుగా ఉన్నప్పుడు రెండు కాలమ్‌లలో ప్రదర్శిస్తుంది.

HTML:


  

    Card Image
    

      
Card Title

      
This is some sample content for the card.

      Learn More

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

ఈ ఉదాహరణలో, .card-container కంటైనర్‌గా ప్రకటించబడింది. కంటైనర్ వెడల్పు 500px కంటే తక్కువగా ఉన్నప్పుడు, .card ఒక కాలమ్ లేఅవుట్‌ను ఉపయోగిస్తుంది, చిత్రం మరియు కంటెంట్‌ను నిలువుగా స్టాక్ చేస్తుంది. కంటైనర్ వెడల్పు 500px లేదా అంతకంటే ఎక్కువ ఉన్నప్పుడు, .card ఒక రో లేఅవుట్‌కు మారుతుంది, చిత్రం మరియు కంటెంట్‌ను పక్కపక్కన ప్రదర్శిస్తుంది.

ఉదాహరణ 2: నావిగేషన్ మెనూ

ఈ ఉదాహరణ అందుబాటులో ఉన్న స్థలం ఆధారంగా నావిగేషన్ మెనూను ఎలా మార్చాలో ప్రదర్శిస్తుంది. కంటైనర్ ఇరుకైనప్పుడు, మెనూ ఐటమ్స్ డ్రాప్‌డౌన్‌లో ప్రదర్శించబడతాయి. కంటైనర్ వెడల్పుగా ఉన్నప్పుడు, మెనూ ఐటమ్స్ క్షితిజ సమాంతరంగా ప్రదర్శించబడతాయి.

HTML:

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

ఈ ఉదాహరణలో, .nav-container కంటైనర్‌గా ప్రకటించబడింది. కంటైనర్ వెడల్పు 600px కంటే తక్కువగా ఉన్నప్పుడు, మెనూ ఐటమ్స్ నిలువు జాబితాగా ప్రదర్శించబడతాయి. కంటైనర్ వెడల్పు 600px లేదా అంతకంటే ఎక్కువ ఉన్నప్పుడు, మెనూ ఐటమ్స్ ఫ్లెక్స్‌బాక్స్ ఉపయోగించి క్షితిజ సమాంతరంగా ప్రదర్శించబడతాయి.

ఉదాహరణ 3: ఉత్పత్తి జాబితా

ఒక ఈ-కామర్స్ ఉత్పత్తి జాబితా కంటైనర్ వెడల్పు ఆధారంగా దాని లేఅవుట్‌ను మార్చగలదు. చిన్న కంటైనర్‌లలో, ఉత్పత్తి చిత్రం, శీర్షిక మరియు ధరతో కూడిన సాధారణ జాబితా బాగా పనిచేస్తుంది. కంటైనర్ పెరిగేకొద్దీ, ప్రదర్శనను మెరుగుపరచడానికి చిన్న వివరణ లేదా కస్టమర్ రేటింగ్ వంటి అదనపు సమాచారాన్ని జోడించవచ్చు. ఇది కేవలం వ్యూపోర్ట్‌ను లక్ష్యంగా చేసుకోవడం కంటే మరింత గ్రాన్యులర్ నియంత్రణను కూడా అనుమతిస్తుంది.

HTML:


  

    Product 1
    
Product Name 1

    
$19.99

  

  

    Product 2
    
Product Name 2

    
$24.99

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

ఈ CSS కోడ్ మొదట `product-listing-container`ను కంటైనర్‌గా స్థాపిస్తుంది. ఇరుకైన కంటైనర్‌ల కోసం (400px కంటే తక్కువ), ప్రతి ఉత్పత్తి ఐటమ్ వెడల్పులో 100% తీసుకుంటుంది. కంటైనర్ 400px దాటి పెరిగేకొద్దీ, ఉత్పత్తి ఐటమ్స్ రెండు కాలమ్‌లలో అమర్చబడతాయి. 768px దాటి, ఉత్పత్తి ఐటమ్స్ మూడు కాలమ్‌లలో ప్రదర్శించబడతాయి.

బ్రౌజర్ మద్దతు మరియు పాలిఫిల్స్

కంటైనర్ క్వెరీలకు క్రోమ్, ఫైర్‌ఫాక్స్, సఫారి మరియు ఎడ్జ్ వంటి ఆధునిక బ్రౌజర్‌లలో మంచి బ్రౌజర్ మద్దతు ఉంది. అయితే, పాత బ్రౌజర్‌లు వాటికి స్థానికంగా మద్దతు ఇవ్వకపోవచ్చు.

పాత బ్రౌజర్‌లకు మద్దతు ఇవ్వడానికి, మీరు ఒక పాలిఫిల్‌ను ఉపయోగించవచ్చు. ఒక ప్రసిద్ధ ఎంపిక container-query-polyfill, ఇది npm మరియు GitHubలో కనుగొనవచ్చు. పాలిఫిల్స్ మద్దతు లేని ఫీచర్ల కోసం ఖాళీని పూరిస్తాయి, పాత బ్రౌజర్‌లలో కూడా కంటైనర్ క్వెరీలను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది.

కంటైనర్ క్వెరీలను ఉపయోగించడానికి ఉత్తమ పద్ధతులు

కంటైనర్ క్వెరీలను ఉపయోగిస్తున్నప్పుడు గుర్తుంచుకోవలసిన కొన్ని ఉత్తమ పద్ధతులు ఇక్కడ ఉన్నాయి:

సాధారణ ఆపదలు మరియు వాటిని ఎలా నివారించాలి

కంటైనర్ క్వెరీలు వర్సెస్ మీడియా క్వెరీలు: సరైన సాధనాన్ని ఎంచుకోవడం

కంటైనర్ క్వెరీలు గణనీయమైన ప్రయోజనాలను అందిస్తున్నప్పటికీ, రెస్పాన్సివ్ డిజైన్‌లో మీడియా క్వెరీలకు ఇప్పటికీ వాటి స్థానం ఉంది. విభిన్న పరిస్థితులకు ఏ సాధనం ఉత్తమమో నిర్ణయించడంలో మీకు సహాయపడటానికి ఇక్కడ ఒక పోలిక ఉంది:

ఫీచర్ కంటైనర్ క్వెరీలు మీడియా క్వెరీలు
లక్ష్యం కంటైనర్ పరిమాణం వ్యూపోర్ట్ పరిమాణం
రెస్పాన్సివ్‌నెస్ కాంపోనెంట్-ఆధారితం పేజీ-ఆధారితం
సౌలభ్యం అధికం మధ్యస్థం
కోడ్ డూప్లికేషన్ తక్కువ ఎక్కువ
వినియోగ సందర్భాలు పునర్వినియోగ కాంపోనెంట్లు, సంక్లిష్ట లేఅవుట్లు ప్రపంచ లేఅవుట్ సర్దుబాట్లు, ప్రాథమిక రెస్పాన్సివ్‌నెస్

సాధారణంగా, మీరు ఒక కాంపోనెంట్ యొక్క స్టైలింగ్‌ను దాని కంటైనర్ పరిమాణం ఆధారంగా మార్చవలసి వచ్చినప్పుడు కంటైనర్ క్వెరీలను ఉపయోగించండి మరియు వ్యూపోర్ట్ పరిమాణం ఆధారంగా ప్రపంచ లేఅవుట్ సర్దుబాట్లు చేయవలసి వచ్చినప్పుడు మీడియా క్వెరీలను ఉపయోగించండి. తరచుగా, ఈ రెండు టెక్నిక్‌ల కలయిక ఉత్తమ విధానం.

కంటైనర్ క్వెరీలతో రెస్పాన్సివ్ డిజైన్ యొక్క భవిష్యత్తు

కంటైనర్ క్వెరీలు రెస్పాన్సివ్ డిజైన్‌లో ఒక ముఖ్యమైన ముందడుగును సూచిస్తాయి, ఎలిమెంట్‌లు విభిన్న సందర్భాలకు ఎలా అనుగుణంగా ఉంటాయో అనే దానిపై ఎక్కువ సౌలభ్యం మరియు నియంత్రణను అందిస్తాయి. బ్రౌజర్ మద్దతు మెరుగుపడటం కొనసాగేకొద్దీ, కంటైనర్ క్వెరీలు వెబ్ డెవలపర్‌లకు అంతకంతకూ ముఖ్యమైన సాధనంగా మారే అవకాశం ఉంది. అవి డిజైనర్లు మరియు డెవలపర్‌లకు నిజంగా అనుకూల మరియు వినియోగదారు-స్నేహపూర్వక వెబ్‌సైట్‌లను సృష్టించడానికి అధికారం ఇస్తాయి, ఇవి అన్ని పరికరాలు మరియు స్క్రీన్ పరిమాణాలలో అతుకులు లేని అనుభవాన్ని అందిస్తాయి.

ముగింపు

CSS కంటైనర్ క్వెరీలు రెస్పాన్సివ్ డిజైన్ టూల్‌కిట్‌కు ఒక శక్తివంతమైన చేర్పు. ఎలిమెంట్‌లు వాటి కంటైనింగ్ ఎలిమెంట్ యొక్క పరిమాణానికి ప్రతిస్పందించడానికి అనుమతించడం ద్వారా, అవి నిజమైన కాంపోనెంట్-ఆధారిత రెస్పాన్సివ్‌నెస్‌ను ప్రారంభిస్తాయి మరియు వెబ్ డిజైన్‌లో కొత్త స్థాయిల సౌలభ్యం మరియు కచ్చితత్వాన్ని ఆవిష్కరిస్తాయి. కంటైనర్ క్వెరీలను సమర్థవంతంగా ఎలా అమలు చేయాలో మరియు ఉపయోగించాలో అర్థం చేసుకోవడం ద్వారా, మీరు మరింత అనుకూల, నిర్వహించదగిన మరియు వినియోగదారు-స్నేహపూర్వక వెబ్‌సైట్‌లను సృష్టించవచ్చు, ఇవి ప్రతి ఒక్కరికీ మెరుగైన అనుభవాన్ని అందిస్తాయి.

వనరులు